<template>
	<view class="jobDetailPage">
		<view class="jobCard  mL15 mR15">
			<view class="jobName font20 bold">
				<text>{{info?.oddJobName}}</text>
				<u-tag :text="info?.izUrgentText" bg-color="#fff" class="jpTag" :color="'#FF0000'"
					:border-color="'#FF0000'" v-show="info?.izUrgent==1" />
				<u-tag v-if="info?.recruitmentCarefree&&info?.recruitmentCarefree.indexOf('10')>=0" text="用工无忧"
					bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'" />
			</view>

			<view class="flex alg-center mT5">
				<view class="jobTime">{{info?.jobBeginDatetime}}-{{info?.jobEndDatetime}}</view>
				<view class="jobTime">{{info?.salaryPaymentText}}</view>
				<view class="jobTime">招{{info?.oddJobUseNum}}人</view>
			</view>
			<view class="flex jst-between alg-center mT10">
				<view class="">
					<text class="font24 u-red bold">{{info?.salary}}</text>
					<text class="u-red font14 bold">元</text>
				</view>
				<view class="font13 ua">
					发布于{{info?.timediffStr}}
				</view>
			</view>
			<view class="mT10 posBox">
				<view class="flex alg-center jst-between mT5 pT10">
					<view class="u-8bd font13  w80 flex alg-center">
						<image class="posImg mR5" :src="resources.posIcon" mode=""></image>
						<text>{{info?.hopeWorkAddress}}</text>
					</view>
					<view class="u-6 font13">
						{{info?.distance}}
					</view>
				</view>
			</view>

		</view>
		<view>
			<view class="flex alg-center jst-between mT20 pL10 pR10">
				<block v-for="(item,i) in tabLis" :key="i">
					<view @click="changeTab(item,i)" class="tabItem font15" :class="curretnTab==i?'active':''">
						<text class="relative">{{item.text}}</text>
					</view>
				</block>
			</view>
			<view class="mT15 flex jst-between pL20 pR15">
				<block v-if="curretnTab==0">
					<text class="font17">报名人员 {{total}}</text>
					<view class="flex alg-center" v-if="total>0"
						@click="xf.onlineUtils.route(`pages/companyPage/subpackge/my/myPulishBmPerson/index?id=${jobId}`)">
						<text class="font13 u-8bd">查看更多</text>
						<u-icon name="arrow-right" :size="24" class="u-8bd mL5"></u-icon>
					</view>
				</block>
				<block v-else>
					<text class="font17">{{tabLis[curretnTab].text}} {{total}}</text>
				</block>
			</view>
			<view class="mT10">
				<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
					@up="upCallback" :down="downOption" :up="upOption" :bottombar="false" :top="topH">
					<view class="bfRa pB15 mL15 mR15 mB10" :class="curretnTab==0||curretnTab==4?'pT15 pR15 pL15':''"
						v-for="(item,i) in list" :key="i">
						<view class="font15 bold startCode pL15 pR15" v-if="curretnTab!=0&&curretnTab!=4">
							开工码：{{item.workCode}}
						</view>
						<view :class="curretnTab!=0&&curretnTab!=4?'pR15 pL15':''">
							<view class="flex  alg-center jst-between ">
								<view class="w75 flex alg-center "
									@click.stop="xf.onlineUtils.route(`pages/common/personOrcompnayInfo/index?id=${item.xfOddGeneralId}&isPerson=${item.comOrUserCertificationStatus}`)">
									<text
										class="companyName  txt-ellipsis  font18 bold u-3">{{item.comOrUserName}}</text>
									<text class="font14 u-6 pL5  line28">手机尾号:{{xf.getLen(item.comOrUserPhone)}}</text>
								</view>
								<view class="flex alg-center">
									<image @click="callPhone(item)" class="imgW54" :src="resources.job.cirMessage"
										mode=""></image>
									<image @click="chatJupm(item)" class="mL10 imgW54" :src="resources.job.cirPhone" mode=""></image>
								</view>
							</view>
							<view class="flex  mT10  ">
								<image class="imgW32" :src="resources.posIcon" mode=""></image>
								<text class="posTxt mL5 " style="width: calc(100% - 46rpx);">{{item.comOrUserAddress}}</text>
																
							</view>
							<block v-if="curretnTab==4">
								<view v-if="!item.paymentAmount"  class="platform-audit">
									<image class="imgW32" :src="resources.warring"
										mode=""></image>
									<text class="font14 u-org mL10">平台审核后，工资将会发放显示</text>
								</view>
								<block v-else>
									<view  class="flex jst-between alg-center mT10 u-border-top pT10">
										<text class="font15">结算时间</text>
										<text class="font15 bold">{{item.paymentTime}}</text>
									</view>
									<view class="flex jst-between alg-center mT10">
										<text class="font15">结算金额</text>
										<text class="font15 bold u-red">{{item.paymentAmount}}元</text>
									</view>
								</block>
							</block>
							<view class="flex alg-center jst-end mT15">
								<block v-if="curretnTab==0">
									<view class="pointer refuseBtn" @click.stop="refuseOpt(item)">
										拒绝Ta
									</view>
									<view class="pointer bmBtn mL10" @click.stop="pgOpt(item)">
										签合同
									</view>
								</block>
								<block v-else-if="curretnTab==1">
									<view class="pointer refuseBtn"
										@click="xf.onlineUtils.route(`pages/common/myJobDetail/index?id=${item.xfOddjobInfoId}&regisId=${item.id}&xfOddGeneralId=${item.xfOddGeneralId}&title=订单详情`)">
										查看详情
									</view>
								</block>
								<block v-else-if="curretnTab==2||curretnTab==3">
									<view class="pointer refuseBtn"
										@click="xf.onlineUtils.route(`pages/common/workFlowDetail/index?id=${item.xfOddjobInfoId}&userId=${item.xfOddGeneralId}&jobType=company`)">
										工作记录
									</view>
									<block v-if="curretnTab==3">
										<view class="pointer bmBtn mL10" @click="rightNow(item)">
											确认
										</view>
									</block>
								</block>
								<block v-else>
									<view class="pointer refuseBtn"
										@click="xf.onlineUtils.route(`pages/common/workFlowDetail/index?id=${item.xfOddjobInfoId}&userId=${item.xfOddGeneralId}&jobType=company`)">
										工作记录
									</view>
									<view class="pointer blueBorderBtn mL10 pL15 pR15" @click.stop="changeWork(item)"
										v-if="item.izFrequently!=1">
										成为常用工
									</view>
									<view class="pointer bmBtn mL10" v-if="item.izEvaluate!=1"
										@click="xf.onlineUtils.route(`/pages/common/commentForm/index?id=${item.xfOddjobInfoId}&orderId=${item.orderid}&jobType=company`)">
										去评价
									</view>
								</block>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import {
		jobOddInfo,
		treatHireList,
		refuseOrPg,
		setCyg,
		settleConfirm
	} from '@/api/companyInterface/user.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import workerJob from "@/components/company/jobCard/index.vue"
	import {
		getLocal
	} from "@/libs/map.js"
	import { completeJob, completeJobPay } from "@/api/common.js"
	import { getPhone } from "@/api/userInterface/job"
	export default {
		components: {
			workerJob
		},
		mixins: [MescrollMixin],
		data() {
			return {
				totalAmount:0,
				topH:0,
				flagSetH: true,
				loading: false,
				jobId: null,
				showModal: false,
				info: null,
				tx: null,
				curretnTab: 0,
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				tabLis: [{
					value: 0,
					text: "待派工"
				}, {
					value: 1,
					text: "已录用"
				}, {
					value: 2,
					text: "进行中"
				}, {
					value: 3,
					text: "待结算"
				}, {
					value: 4,
					text: "已完成"
				}],
				total: 0,
				latitude: "",
				longitude: ""
			};
		},
		watch: {
			info() {
				if (this.flagSetH == true) {
					this.$nextTick(() => {
						this.getElementScollTop()
						this.flagSetH = false;
						console.log(this.flagSetH)
					})
				}
			},
		},
		onShow() {
			this.mescroll&&this.mescroll.triggerDownScroll()
		},
		async onLoad(e) {
			this.jobId = e.id;
			this.curretnTab=e.current||0;
			this.getDetail(this.jobId)

		},
		methods: {
			chatJupm(item){
				let info={
					id: item.xfOddGeneralId,
					realName: item.comOrUserName,
					headImage:item.comOrUserProfile,
					online: false
				}
				this.chatStore.addFriend(info)
			},
			getElementScollTop() {
				const query = uni.createSelectorQuery()
				query.select('.lisBox').boundingClientRect((data) => {
						this.topH = Math.round(data.top)+'px'
						console.log(this.topH)
					}).exec()
			},
			
			callNumber(v) {

				this.xf.callPhone({
					acquirerId: v.xfOddGeneralId,
					details: 10
				})
			},
			callPhone(v) {
				let that = this;
				getPhone({
					acquirerId: v.xfOddGeneralId
				}).then(res => {
					const {result} = res
					if (result.code && result.code == 201){
						let htmlStr = `<p class="mT10">拨打电话需支付<span class="u-red">2元</span></p>`
						this.$refs.tipModal.open({
							slotHtml: htmlStr,
							btnText: "拨打",
							showCancel: true,
							success: function() {
								that.xf.jumpPayPage(`acquirerId=${v.xfOddGeneralId}`)
							}
						})
					} else {
						this.$refs.tipModal.open({
							content: "确认拨打电话吗？",
							btnText: "拨打",
							showCancel: true,
							success: function() {
								that.callNumber(v)
							}
						})
					}	
				})
			},
			changeTab(item, i) {
				this.curretnTab = i;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			rightNow(v) {
				let that = this;
				completeJob({oddJobId: v.xfOddjobInfoId, oddUserId: v.xfOddGeneralId}).then(res=>{
					const {result} = res
					this.totalAmount = result.totalAmount
					let htmlStr = `<p>确认 ${v.comOrUserName} 工作已完成</p><p class="mT10">支付薪资 <span class="u-red">${this.totalAmount}元</span></p>`
					this.$refs.tipModal.open({
						slotHtml: htmlStr,
						btnText: "立即支付",
						showCancel: true,
						success: function() {
							completeJobPay({
								oddJobId: v.xfOddjobInfoId,
								oddUserId: v.xfOddGeneralId,
							}).then(_res=>{
								settleConfirm({
									"regisid": v.id,
									"oddjobOrderId": v.orderid,
									"needInfoId": v.xfOddjobInfoId,
									"quota": "210",
									"izPaymentStatus": "1",
									"izPaymentStatusText": "已支付",
									"paymentWay": "0",
									"paymentWayText": "微信",
									"acquirerId": v.xfOddGeneralId,
									"remark": ""
								}).then(res => {
									if (res.success == true) {
										uni.showToast({
											icon: 'none',
											title: "结算完成!",
											duration: 2000
										})
										setTimeout(() => {
											that.list = [];
											that.mescroll.resetUpScroll();
										}, 2000)
									}
								})
							})
							
						}
					})
				})
			},
			//设置为常用工
			changeWork(item) {
				this.$refs.tipModal.open({
					content: "确认将Ta设置为常用工吗？",
					btnText: "确认",
					showCancel: true,
					success: function() {
						setCyg({
							usedUserId: item.xfOddGeneralId
						}).then(res => {
							if (res.success == true) {
								uni.showToast({
									icon: 'none',
									title: "设置成功!",
									duration: 2000
								})
								setTimeout(() => {
									that.list = [];
									that.mescroll.resetUpScroll();
								}, 2000)
							}

						}).catch(err => {

						})
					}
				})
			},
			refuseOpt(item) {
				let that = this;
				this.$refs.tipModal.open({
					content: "确认拒绝Ta吗？",
					btnText: "拒绝",
					showCancel: true,
					success: function() {
						refuseOrPg([{
							"id": item.id,
							"enrollStatus": "5",
							"enrollStatusText": "已拒绝"
						}]).then(res => {

							if (res.success == true) {
								uni.showToast({
									icon: 'none',
									title: "操作成功!",
									duration: 2000
								})
								setTimeout(() => {
									that.list = [];
									that.mescroll.resetUpScroll();
								}, 2000)
							}
						}).catch(err => {

						})
					}
				})
			},
			pgOpt(item) {
				this.xf.onlineUtils.route(`/pages/common/constract/index?id=${item.id}&oddJobId=${item.xfOddjobInfoId}&oddUserId=${item.xfOddGeneralId}`)
			},
			async upCallback(page) {
				if (page.num = 1) this.list = []
				let query = {
					"xfOddjobInfoId": this.jobId,
					enrollStatus: this.curretnTab,
					"pageNo": 1,
					"pageSize": 10
				}
				query.pageNo = page.num;

				treatHireList(query).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.total = res.result.total;
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
			},
			async getDetail(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon()
				this.info=null;
				jobOddInfo({
					xfOddjobInfoId: this.jobId,
					latitude: lat,
					longitude: lon
				}).then(res => {
					this.info = res.result.records[0]
				})
			},
			jumpOpenCompany() {
				uni.navigateTo({
					url: `/pages/common/personOrcompnayInfo/index?id=${this.info.id}&isPerson=${this.info?.oddReleaseType}`
				})
			},
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.startCode {
		height: 96rpx;
		line-height: 96rpx;
		background: radial-gradient(#F5F7FF 0%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.companyName {
		max-width: 240rpx;
	}

	.orderCard {
		background: linear-gradient(#F5F7FF 10%, #FFFFFF);
		border-radius: 30rpx;
	}

	.jgGs {
		border-bottom: 2rpx solid #F6F6F6;
	}

	.tabItem {
		// margin-right: 58rpx;
		position: relative;

		.relative {
			z-index: 1;
		}

		&:first-child {
			margin-left: 20rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			font-weight: bold;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				z-index: 0;
				width: 100%;
				height: 10rpx;
				background: linear-gradient(to right, #3291F8, #E4F1FE);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}

	.platform-audit{
		width: 100%;
		height: 72rpx;
		background: #F8FAFF;
		display: flex;
		align-items: center;
		padding-left: 25rpx;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}
	.rightImg {
		width: 9rpx;
		height: 18rpx;
	}

	.phoneImg {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
	}

	.posBox {
		border-top: 2rpx solid #F6F6F6;
	}

	.companyInfo {
		width: calc(100% - 110rpx);
	}

	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;


		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			margin-right: 10rpx;
			height: 40rpx;
			margin-top: 16rpx;
			line-height: 40rpx;
			padding: 0 10rpx;

		}

		.jobTag {
			margin-right: 10rpx;
			height: 44rpx;
			margin-top: 16rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>